<script setup>
import {ElMessageBox} from "element-plus";

defineProps({
  title: {
    type: String,
    default: '',
    required: true,
  },
  confirmBtnText: {
    type: String,
    default: '保存',
  },
  options: {
    type: Object,
    default: () => ({
      showFooter: true,
      showCancelBtn: true,
      showConfirmBtn: true,
    }),
  },
  width: {
    type: String || Number,
    default: '30%',
  },
  btnDisabled: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['close', 'confirm'])
const visible = defineModel('visible', {
  default: false,
  type: Boolean,
  required: true,
})
const modalRef = ref(null)

function handleCancel(done) {
  emit('close')
}

function handleSave() {
  emit('confirm')
}
</script>

<template>
  <el-dialog
    v-bind="$attrs"
    ref="modalRef"
    v-model="visible"
    :title="title"
    :width="width"
    :before-close="handleCancel"
    class="base-dialog"
    draggable
    :close-on-click-modal="false"
  >
    <slot />
    <template v-if="options.showFooter" #footer>
      <div class="dialog-footer text-center">
        <slot name="footer" />
        <el-button text bg @click="handleCancel">
          <!--          <template #icon> -->
          <!--            <SvgIcon name="material-symbols:cancel-outline" type="iconify" /> -->
          <!--          </template> -->
          取消
        </el-button>
        <el-button v-if="options.showConfirmBtn" type="primary" :disabled="btnDisabled" @click="handleSave">
          <!--          <template #icon> -->
          <!--            <SvgIcon name="material-symbols:check-circle-outline" type="iconify" /> -->
          <!--          </template> -->
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss">
:deep(.el-overlay){
  backdrop-filter: blur(10px);
}
.base-dialog{
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  .el-dialog__header{
    margin:calc(-1 * var(--el-dialog-padding-primary));
    margin-bottom: 20px;
    @apply flex justify-between items-center;
  }
  .el-dialog__body{
    max-height: calc(100vh - 220px);
    overflow: auto;
    margin-right: -16px;
    padding-right: var(--el-dialog-padding-primary);
  }
  .el-dialog__footer{
    margin: 0 -15px;
    margin-bottom: -20px;
    padding-bottom: 15px;
    border-top: 1px solid var(--el-border-color-extra-light);
  }
  :deep(.el-overlay) {
    background-color: transparent;
    pointer-events: none;
  }
  :deep(.el-dialog) {
    pointer-events: auto;
  }
}
</style>
